import { useState } from 'react'
import { View } from '@tarojs/components'
import F2Canvas from 'taro-f2-react'
import { Chart, Interval, Legend, PieLabel} from '@antv/f2'
// import F2Canvas from "../F2Canvas/index";
import './index.scss'

interface IPieTypeChartsProps {
  data?: any[]
  fieldNames?: {
    [key: string]: string
  }
  id?: string
}

const countTotal = (arr: any[], keyName: string) => {
  let total = 0
  total = arr.reduce(function (sum, currentValue) {
    return currentValue.hasOwnProperty('allNum')
      ? currentValue.allNum
      : currentValue[keyName]
      ? sum + currentValue[keyName]
      : sum
  }, 0)
  return total
}

const IPieTypeCharts: React.FC<IPieTypeChartsProps> = props => {
  // const [current, setCurrent] = useState<any>(null)

  const {
    id = 'ipietype_chart',
    data = [],
    fieldNames = { label: 'year', value: 'population' }
  } = props

  const totalNum = countTotal(data || [], fieldNames.value)

  const sourceData =
    data?.map(item => ({
      ...item,
      const: 'const',
      y: item[fieldNames.value]
    })) || []
  // const Text = (res, context) => {
  //   const { coord, data: allData } = res
  //   let currentVal, currentText
  //   if (current === null) {
  //     currentVal = allData?.[0][fieldNames.value]
  //     currentText = allData?.[0][fieldNames.label]
  //   } else {
  //     currentVal = allData.find(item => item[fieldNames.label] == current)?.[
  //       fieldNames.value
  //     ]
  //     currentText = current
  //   }

  //   const { center } = coord
  //   return (
  //     <group
  //       style={{
  //         left: center.x,
  //         top: center.y - context.px2hd('30px'),
  //         width: '100px'
  //       }}
  //     >
  //       <text
  //         attrs={{
  //           text: `${
  //             totalNum != 0 ? ((currentVal / totalNum) * 100).toFixed(2) : 0
  //           } %`,
  //           fill: '#000',
  //           textAlign: 'center'
  //         }}
  //       />
  //       <text
  //         style={{ marginTop: '10px' }}
  //         attrs={{
  //           text: currentText,
  //           fill: '#000',
  //           textAlign: 'center'
  //         }}
  //       />
  //     </group>
  //   )
  // }

  // const { id = "ipierosetype_chart", data = [], fieldNames = {} } = props;
  return (
    <View style={{ width: '100%', height: '260px' }} className='chart_body'>
      {sourceData.length > 0 ? (
        <F2Canvas id={id}>
          <Chart
            data={sourceData}
            coord={{
              type: 'polar',
              transposed: true,
              radius: 0.75,
            }}
            scale={{
              population: {
                min: 0
              }
            }}
          >
            <Interval
              x='const'
              y='y'
              adjust='stack'
              color={[
                fieldNames.label,
                [
                  '#3e73fe',
                  '#f7ba1e',
                  '#14c9c9',
                  '#2fc25b',
                  '#8543e0',
                  '#223273'
                ]
              ]}
              // selection={{
              //   triggerOn: 'touchstart',
              //   selectedStyle: record => {
              //     setCurrent(record[fieldNames.label])
              //     const { yMax, yMin } = record
              //     return {
              //       r: yMax + yMax * 0.1,
              //       r0: yMin
              //     }
              //   }
              // }}
            />
            <PieLabel
                sidePadding={40}
                label1={(data, record) => {
                  return {
                    text: data.name,
                    fill: record.color,
                  };
                }}
                label2={(data) => {
                  return {
                    fill: '#333333',
                    text:data.y,
                    fontWeight: 500,
                    fontSize: 12,
                  };
                }}
              />
            <Legend
              position='bottom'
              style={{
                flexDirection: 'row',
                justifyContent: 'center'
              }}
              clickable={false}
            />
            {/* <Text /> */}
          </Chart>
        </F2Canvas>
      ) : null}
    </View>
  )
}

export default IPieTypeCharts
